<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>设备</title>
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <style type="text/css">
    	body {
    		background-color: #F2F5F7;
    	}
    	.main-btn {
    		background: #498AF7;
    	}
    	.main-btn>a {
    		display: inline-block;
    		width: 25%;
    		text-align: center;
    	}
    	.main-btn-icon {
    		width: 50%;
    		margin-top: 15px;
    	}
    	.main-btn h5 {
    		color: #FFFFFF;
    		font-size: 14px;
    		text-align: center;
    		margin-top: 10px;
    		margin-bottom: 24px;
    	}
    	.wait-to-confirm {
    		background-color: #fff;
    	}
    	.wait-to-confirm a {
    		display: inline-block;
    		width: 25%;
    		text-align: center;
    	}
    	.wait-to-confirm-img {
    		width: 25%;
    		margin-top: 15px;
    	}
    	.wait-to-confirm h5 {
    		margin-top: 8px;
    	}
    	.wait-to-confirm-count {
    		color: #000000;
			font-size: 14px;
    	}
    	.wait-to-confirm-text {
    		margin-bottom: 19px;
    	}
    	.chart-container {
    		margin-top: 15px;
    		background-color: #fff;
    	}
    	.chart-container>h4 {
    		padding-top: 15px;
    		padding-bottom: 12px;
    		text-indent: 15px;
    	}
    	.title {
			/*卡片的标题*/
			font-size: 15px;
			font-weight: normal;
			color: #666666;
		}
		.titleMore {
			/*卡片标题-更多*/
			font-size: 15px;
			color: #333333;
		}
		#equipment-line-chart {
			height: 250px;
		}
		.recommend-equipment>div:first-of-type, .recovery-methods>div {
			background-color: #FFFFFF;
			height: 49px;
		}
		.recommend-equipment {
			margin-top: 15px;
		}
		.mui-table-view-cell {
			padding-right: 0;
		}
		.mui-table-view-cell h5 {
			margin-top: 0;
			margin-bottom: 10px;
		}
		.equipment-text-content {
			margin: 0;
			margin-top: -5px;
		}
		.equipment-img-container {
			overflow: auto;
			white-space: nowrap;
		}
		.equipment-img-container::-webkit-scrollbar {
			display: none;
		}
		.equipment-img-container img:not(:first-child) {
			margin-left: 5px;
		}
		.recommend-equipment-img {
			width: 100px;
			border: 1px solid #eee;
			border-radius: 3px;
			background-size: cover;
			vertical-align: middle;
		}
		.recovery-content h5 {
			font-size: 15px;
			color: #333333;
			margin-top: 2px;
			margin-bottom: 5px;
		}
		.recovery-methods-addtime {
			margin: 0;
		}
		
		
		.latest-message-container {
			margin-top: 16px;
			background-color: #FFFFFF;
		}
		.message-title {
			padding: 0 18px;
		}
		.message-title h2 {
			line-height: 40px;
			font-size: 15px;
			font-weight: normal;
		}
		.message-title a {
			display: block;
			float: right;
			font-size: 15px;
			line-height: 40px;
		}
		.latest-message-container h3 {
			font-weight: normal;
			font-size: 16px;
		}
		.latest-message-container ul li p {
			font-size: 16px;
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav" style="background-color: #498af7; box-shadow: none;">
		<h1 class="mui-title" style="color: #ffffff;">首页</h1>
	</header>
	<div class="mui-content">
		<div id="slider" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop" id="slider-group">
			</div>
			<div class="mui-slider-indicator" id="slider-indicator">
			</div>
		</div>
		<div class="main-btn">
			<a href="#" id="addEq" data-url="../equipment/AddDevice_1.html">
				<img src="../../images/drawable-xxhdpi/add_equipment.png" class="main-btn-icon" />
				<h5>添加设备</h5>
			</a><!--
			--><a href="#" id="eqManagement" data-url="../equipment/equipment_manage.html">
				<img src="../../images/drawable-xxhdpi/eq_eq_management.png" class="main-btn-icon" />
				<h5>设备管理</h5>
			</a><!--
			--><a href="#" id="faultManagement" data-url="../order/order_with_back.html">
				<img src="../../images/drawable-xxhdpi/eq_fault_management.png" class="main-btn-icon" />
				<h5>工单管理</h5>
			</a><!--
			--><a href="#" id="faultStatistics" data-url="../equipment/statistics.html">
				<img src="../../images/drawable-xxhdpi/eq_statistics.png" class="main-btn-icon" />
				<h5>工单统计</h5>
			</a>
		</div>
		<div class="wait-to-confirm">
			<a href="#"  id="tab1">
				<img src="../../images/drawable-xxhdpi/eq_eq.png" class="wait-to-confirm-img" />
				<h5 class="wait-to-confirm-count">0</h5>
				<h5 class="wait-to-confirm-text">待处理</h5>
			</a><!--
			--><a href="#" id="tab2">
				<img src="../../images/drawable-xxhdpi/eq_fault.png" class="wait-to-confirm-img" />
				<h5 class="wait-to-confirm-count">0</h5>
				<h5 class="wait-to-confirm-text">处理中</h5>
			</a><!--
			--><a href="#" id="tab3">
				<img src="../../images/drawable-xxhdpi/eq_fix.png" class="wait-to-confirm-img" />
				<h5 class="wait-to-confirm-count">0</h5>
				<h5 class="wait-to-confirm-text">已处理</h5>
			</a><a href="#" id="tab4">
				<img src="../../images/drawable-xxhdpi/eq-qr.png" class="wait-to-confirm-img" />
				<h5 class="wait-to-confirm-count">0</h5>
				<h5 class="wait-to-confirm-text">设备查询</h5>
			</a>
		</div>
		<div class="chart-container">			
			<div><canvas id="equipmentChart" width="380" height="200"></canvas></div>
		</div>
		<div class="latest-message-container">
			<div class="message-title" >
				<a data-url="recommend-list.html">更多</a>
				<h2>设备推荐</h2>
			</div>
			<div class="recommend-equipment-content"></div>
		</div>
		<div class="latest-message-container">			
			<div class="message-title" >
				<a data-url="note-list.html">更多</a>
				<h2>方法推荐</h2>
			</div>	
			<div class="recovery-content">
			</div>
		</div>
	</div>
	<script src="../../js/mui.min.js"></script>
	<script type="text/javascript" src="../../js/Chart.js" ></script>
	<script type="text/javascript" src="../../js/md5.min.js" ></script>
	<script type="text/javascript" src="../../js/imgload.js" ></script>
	<script type="text/javascript" src="../../js/equipment_main.js" ></script>
</body>
</html>